<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码重置</title>
    <link rel="stylesheet" href="/static/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/assets/css/font-awesome.min.css">
    <style>
        .container {
            /*88888*/
            max-width: 500px;
            margin-top: 50px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
            border-radius: 5px;
            background-color: #fff;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .btn-primary {
            width: 100%;
        }
        .alert {
            margin-top: 20px;
        }
        .code-input-group {
            display: flex;
        }
        .code-input-group .form-control {
            flex: 1;
            margin-right: 10px;
        }
        .code-input-group .btn {
            width: 120px;
        }
    </style>
</head>
<body style="background-color: #f5f5f5;">
    <div class="container">
        <h2 class="text-center mb-4">密码重置</h2>
        <div id="alertContainer"></div>
        <form id="passwordResetForm">
            <div class="form-group">
                <label for="email"><i class="fa fa-envelope-o"></i> 邮箱</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="请输入您的邮箱" required>
            </div>
            <div class="form-group code-input-group">
                <div>
                    <label for="code"><i class="fa fa-key"></i> 验证码</label>
                    <input type="text" class="form-control" id="code" name="code" placeholder="请输入验证码" required>
                </div>
                <button type="button" class="btn btn-secondary" id="sendCodeBtn" style="margin-top: 24px;">发送验证码</button>
            </div>
            <div class="form-group">
                <label for="newPassword"><i class="fa fa-lock"></i> 新密码</label>
                <input type="password" class="form-control" id="newPassword" name="newPassword" placeholder="请输入新密码" required>
            </div>
            <div class="form-group">
                <label for="confirmPassword"><i class="fa fa-lock"></i> 确认密码</label>
                <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" placeholder="请再次输入新密码" required>
            </div>
            <button type="submit" class="btn btn-primary">确认重置</button>
        </form>
    </div>

    <script src="/static/assets/js/jquery-1.9.1.min.js"></script>
    <script src="/static/assets/js/bootstrap.min.js"></script>
    <script>
        $(function() {
            // 发送验证码
            $('#sendCodeBtn').click(function() {
                var email = $('#email').val();
                if (!email) {
                    showAlert('请输入邮箱', 'danger');
                    return;
                }

                // 验证邮箱格式
                var emailRegex = /^[A-Za-z0-9]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (!emailRegex.test(email)) {
                    showAlert('请输入有效的邮箱地址', 'danger');
                    return;
                }

                // 禁用发送按钮，防止重复点击
                $(this).prop('disabled', true).text('发送中...');

                // 发送验证码请求
                $.ajax({
                    url: '/passwordReset/sendCode',
                    type: 'POST',
                    data: { email: email },
                    success: function(response) {
                        if (response.success) {
                            showAlert(response.message, 'success');
                            // 倒计时60秒
                            countdown(60);
                        } else {
                            showAlert(response.message, 'danger');
                            $('#sendCodeBtn').prop('disabled', false).text('发送验证码');
                        }
                    },
                    error: function() {
                        showAlert('发送失败，请稍后重试', 'danger');
                        $('#sendCodeBtn').prop('disabled', false).text('发送验证码');
                    }
                });
            });

            // 表单提交
            $('#passwordResetForm').submit(function(e) {
                e.preventDefault();

                var email = $('#email').val();
                var code = $('#code').val();
                var newPassword = $('#newPassword').val();
                var confirmPassword = $('#confirmPassword').val();

                // 表单验证
                if (!email || !code || !newPassword || !confirmPassword) {
                    showAlert('请填写所有必填字段', 'danger');
                    return;
                }

                if (newPassword !== confirmPassword) {
                    showAlert('两次输入的密码不一致', 'danger');
                    return;
                }

                if (newPassword.length < 6) {
                    showAlert('密码长度不能少于6位', 'danger');
                    return;
                }

                // 提交重置密码请求
                $.ajax({
                    url: '/passwordReset/confirm',
                    type: 'POST',
                    data: {
                        email: email,
                        code: code,
                        newPassword: newPassword
                    },
                    success: function(response) {
                        if (response.success) {
                            showAlert(response.message, 'success');
                            // 3秒后跳转到登录页面
                            setTimeout(function() {
                                window.location.href = '/login';
                            }, 3000);
                        } else {
                            showAlert(response.message, 'danger');
                        }
                    },
                    error: function() {
                        showAlert('重置失败，请稍后重试', 'danger');
                    }
                });
            });

            // 显示提示信息
            function showAlert(message, type) {
                var alertHtml = '<div class="alert alert-' + type + ' alert-dismissible fade in" role="alert">' +
                    '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                    '<span aria-hidden="true">&times;</span></button>' +
                    message +
                    '</div>';
                $('#alertContainer').html(alertHtml);
                // 5秒后自动关闭提示
                setTimeout(function() {
                    $('.alert').alert('close');
                }, 5000);
            }

            // 倒计时函数
            function countdown(seconds) {
                var btn = $('#sendCodeBtn');
                if (seconds <= 0) {
                    btn.prop('disabled', false).text('发送验证码');
                    return;
                }
                btn.text('重新发送(' + seconds + ')');
                seconds--;
                setTimeout(function() {
                    countdown(seconds);
                }, 1000);
            }
        });
    </script>
</body>
</html>